<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>学习加法</title>

  <!-- Bootstrap -->
  <link rel="stylesheet" href="__PUBLIC__/bootstrap/bootstrap.min.css" />
  <script type='text/javascript' src="__PUBLIC__/jquery/jquery-3.1.1.min.js"></script>
  <script type='text/javascript' src="__PUBLIC__/jquery/jquery.validate.min.js"></script>

</head>

<body>
  <div class="container">
    <!--       头部导航-->
    <div class="row">
      <include file='Common:header' />
    </div>
    <div class="row">
      <include file='Common:lefter' />
      <div class="">
        <!--<button onclick="addrow();">添加行</button>-->
        <!--<button onclick="delrow();">删除行</button>-->
        <!--<button onclick="xianshi();">显示</button>-->
        <!--<button onclick="yincang();">隐藏</button>-->
        <button onclick="chuti();">出题</button>
        出题数量:
        <input id="shuliang" value="5"> 用时:
        <input type="text" id="time" readonly="readonly">
      </div>
      <div id="content" style="width:500px;float:left;">
        <table class="table table-bordered table-condensed" id="maintable" style="font-size: 34px;">
          <tr>
            <!--<font color='green'>√</font>
              <td hidden>X</td>-->
          </tr>
        </table>
        <button onclick="jifen();">计分</button>
      </div>

      <div id="right" style="width:200px;float:left;">

      </div>
    </div>

    <!--<p>Not loaded yet.</p>-->
    <include file='Common:footer' />
  </div>


  <script language='javascript'>
    var start = 1; //判断是否需要重新出题
    var time = 0;
    var t;

    // 计时器开始
    function timedCount() {
      $('#time').val(time);
      time = time + 1;
      t = setTimeout("timedCount()", 1000)
    }

    // 计时器停止并重置
    function stopCount() {
      clearTimeout(t);
      time = 0;
    }

    function jifen() {
      start = 1;
      console.log("开始计分");
      var zhengque = 0;
      var cuowu = 0;
      var r_count = $("#maintable tr").length - 1;
      for (var i = 0; i < r_count; i++) {
        var d = i + 1;
        var a = parseInt($("#" + d).attr("a"));
        var b = parseInt($("#" + d).attr("b"));
        var c = $("#" + d + "c").val();
        var e = $("#" + d + "d");
        var f = $("#" + d + "e");
        e.prop("hidden", true);
        f.prop("hidden", true);
        if (a + b == c) {
          console.log(d, "正确", a, b, c);
          e.removeAttr("hidden");
          zhengque = zhengque + 1;
        } else {
          console.log(d, "不正确", a, b, c);
          f.removeAttr("hidden");
          cuowu = cuowu + 1;
        }
      }
      addscore(zhengque, cuowu, time - 1);
      stopCount();
      $("#right div:last").css("background-color", "#B2E0FF");
    }

    function addscore(zq, cw, ti) {
      var scores = $("#right");
      var count = scores.children().length;
      var thescore = "<div>正确:" + zq + "错误:" + cw + "用时:" + ti + "秒</div>"
      // console.log("开始长度:",count);
      scores.append(thescore);
      if (count > 14) {
        scores.children().eq(0).remove();
      }
      scores.children().css("background-color", "white");
    }

    function chuti() {
      if (start == 0) {
        return;
      }
      timedCount();
      // console.log("出题");
      var shuliang = $("#shuliang").val();
      if (shuliang > 20) {
        shuliang = 20;
        $("#shuliang").val(shuliang)
      }

      delrow();
      for (var i = 0; i < shuliang; i++) {
        addrow(i + 1);
      }
      start = 0;
    }

    function addrow(rowcount) {
      // console.log("添加行");
      var tabtr = $("#maintable tr");
      var a = Math.floor(Math.random() * 10 + 1);
      var b = Math.floor(Math.random() * 10 + 1);
      var temptr = "<tr id=" + rowcount + " a=" + a + " b=" + b + ">" +
        "<td >" + a + "</td><td>+</td>" +
        "<td >" + b + "</td><td>=</td>" +
        "<td><input id=" + rowcount + "c required style='width:100px;'></td>" +
        "<td id=" + rowcount + "d hidden><font color='green'>√</font></td>" +
        "<td id=" + rowcount + "e hidden><font color='red'>X</font></td></tr>"
      $("#maintable").append(temptr);
    }

    function delrow() {
      $("#maintable  tr:not(:first)").remove();
    }

    $(document).ready(function () {
      // $("p").text("The DOM is now loaded and can be manipulated.");
      chuti();
    });

    function xianshi() {
      var r_count = $("#maintable tr").length - 1;
      for (var i = 0; i < r_count; i++) {
        var d = i + 1;
        var e = $("#" + d + "d");
        var f = $("#" + d + "e");
        e.removeAttr("hidden");
        f.removeAttr("hidden");
      }
    }

    function yincang() {
      var r_count = $("#maintable tr").length - 1;
      for (var i = 0; i < r_count; i++) {
        var d = i + 1;
        var e = $("#" + d + "d");
        var f = $("#" + d + "e");
        e.prop("hidden", true);
        f.prop("hidden", true);
      }
    }
  </script>
</body>

</html>